var game = new State();

bg = new Image();
bg.src = "bg.png";
var content = document.getElementById("content");
game.floor = new Object();
game.floor
game.floor.rotation = 0;
game.floor.left = -1000;
game.floor.top = canvasBuffer.height -15;
game.floor.right = 100000;
game.floor.bottom = canvasBuffer.height; 
game.floor.headbutt = function(){return false;}
game.init = function()
{ 
    timeElement = document.getElementById("seconds");
    scoreElement = document.getElementById("points"); 
    startTime = Date.now() /1000;
    this.initialized = true;
    currentState = game; 
}

game.update = function() 
{

       // console.log(game.floor.top, player.y + player.height);
        if(player.y + player.height > game.floor.top)
        {
            player.y = game.floor.top - player.height -1;
        }
     console.log(player.y);
    if(timeElement && scoreElement)
    {
        timeElement.innerHTML = Math.floor(time.toString());
        scoreElement.innerHTML = score;
    }
    else
    {
        timeElement = document.getElementById("seconds");
        scoreElement = document.getElementById("points"); 
    }
    

   
     
    // UPDATE
   

    boxes.update();
    
    player.update();
    player.y += player.yvel*delta;
    var collision = collides();
    if(collision)
    {
         player.y -= player.yvel*delta;
         
        

        if(player.y > collision.top)//coming from below, or headbutting
        {

            collision.headbutt();
            
        }
        else
        {
            player.grounded =true;
            
        }
        player.yvel = 0;
    }
    collision = false;
    player.x += (player.xvel *delta); 
    collision = collides();
    if(collision)
    {
        player.x -= (player.xvel *delta);
         
    }

    // camera.x++; 
 
    if(camera.x + player.x < camera.stopX1)
    {
        camera.x = camera.stopX1 - player.x ;
        // checkBounds();
    }
    else if(camera.x + player.x > camera.stopX2) //cache these multiplicands
    {
        camera.x =camera.stopX2 - player.x ;
        // checkBounds();
    }
    // camera.y = canvasBuffer.height - player.y - player.height; 
    content.style.webkitTransform = "translate( " + (camera.x).toString() + "px , " + (camera.y).toString() +"px ) "; 
    content.style.MozTransform = "translate( " + (camera.x).toString() + "px , " + (camera.y).toString() +"px ) "; 
    // document.body.style.backgroundPosition = camera.x.toString() + "px " + camera.y.toString() + "px " ;
    // checkBounds();

    // CLEAR
    //I disabled clearing in an effort to find what caused frame skips.... and now the game runs better and doesn't need clearing?
    //I don't understand how it's clearing without me clearing it. OHHHH
    //I'm drawing the background down first anyways, so no need to clear.... interesting...
    //if I end up needing transparency in the background for some stupid reason, I'll implement some type of
    //smart clearing so we aren't clearing the whole screen. Now that I know clearing was the issue.
    // contextBuffer.clearRect(0, 0, canvasBuffer.width, canvasBuffer.height);

    // DRAW
    // contextBuffer.scale(1, 1);
    // contextBuffer.fillStyle = contextBuffer.createPattern(bg, 'repeat-x');
     //contextBuffer.fillRect(0, 0, canvasBuffer.width - camera.x, canvasBuffer.height - camera.y );
    //contextBuffer.drawImage(bg, 0, 0, canvasBuffer.width, canvasBuffer.height, camera.x, camera.y , canvasBuffer.width, canvasBuffer.height);
     
     var numImages = Math.ceil(canvasBuffer.width / bg.width) + 1;
    var startOffset = Math.abs(camera.x % bg.width);
    console.log(startOffset);

 for (var i = 0; i < numImages ; i++) {
    if(camera.x <=0){
    var xpos = ( -startOffset) + (bg.width *i) ;
    }else{
        var xpos = ( startOffset-bg.width) + (bg.width *i) ;
    }
    contextBuffer.drawImage(bg,   xpos , 0, bg.width, canvasBuffer.height); 
 }
     
    contextBuffer.drawImage(player.image, player.drawParams["sx"],  player.drawParams["sy"], player.imageWidth, player.imageHeight, player.x + camera.x , player.y + camera.y , player.width, player.height);

    if(debug)
    { //ISSUE: when ajax completes, we still have a camera offset, but the boxes are being rendered in the wrong spot, because their absolute values are then being based on the camera offset...
        //their coordinates need to be independent of camera, but the html boxes are drawn based on camera position...
        for (var i = boxes.length - 1; i >= 0; i--) 
        {
            var x = boxes[i].left+ camera.x;
            var y = boxes[i].top + camera.y;
            var width = boxes[i].right - boxes[i].left;
            var height = boxes[i].bottom - boxes[i].top;
             
            

            contextBuffer.strokeRect(x  , y    ,width,height);
        }

    }
    
    //essentially, our frame swap
 context.drawImage(canvasBuffer, 0 , 0);
     
}


game.draw = function()
{
       context.drawImage(canvasBuffer, 0 , 0);
}